<template>
<view  v-if="guanggaopic && guanggaostatus=='1'">
	<view class="advert flex-xy-center" v-if="guanggaotype=='1'">
		<view class="advert_module">
			<image :src="guanggaopic" @tap="goto" :data-url="guanggaourl" mode="widthFix" class="advert_poster" alt=""/>
			<view class="advert_close advert_close_bottom flex-xy-center">
				<image @tap="guanggaoClick" src="../../static/img/close2.png" alt=""/>
			</view>
		</view>
	</view>
	<view class="advert_video" v-if="guanggaotype=='2'">
		<video style="max-width: 100%; height: 850rpx;" class="dp-guanggao-video" :style="{height:windowHeight+'px',width:'100%'}" :src="guanggaopic" :show-mute-btn="true" :play-btn-position="'center'"
		:object-fit="'cover'" :controls="false" :autoplay="true" :loop="false" :show-center-play-btn="cpbtn" @ended="playend"></video>
		<view class="advert_close advert_close_top flex-xy-center" v-if="isend">
			<image @tap="guanggaoClick" src="../../static/img/close2.png" alt=""/>
		</view>
	</view>
</view>
</template>
<script>
	var app = getApp();
	export default {
		data(){
			return {
				guanggaostatus:'1',
				windowHeight:560,
				isend:false,
				cpbtn:false
			}
		},
		props: {
			guanggaourl:"",
			guanggaopic:"",
			guanggaotype:{default:'1'},
		},
		mounted:function(){
			var sysinfo = uni.getSystemInfoSync();
			this.windowHeight = sysinfo.windowHeight;
			if(app.globalData.platform=='h5' || app.globalData.platform=='mp'){
				this.cpbtn = true
			}
		},
		methods:{
			guanggaoClick(){
				this.guanggaostatus='0'
			},
			playend:function(e){
				this.guanggaostatus='0';
				this.isend = true;
			}
		}
	}
</script>
<style>
	.advert{
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 20;
		background: rgba(0, 0, 0, 0.7);
	}
	.advert_module{
		position: relative;
		width: 80%;
	}
	.advert_poster{
		position: relative;
		width: 85%;
		display: block;
		margin: 0 auto;
	}
	.advert_close_bottom{
		position: relative;
		border: 1px solid #fff;
		margin-top: 10rpx;
	}
	.advert_close_top{
		position: fixed;
		top: 14rpx;
		right: 14rpx;
		background: rgba(0, 0, 0, 0.7);
	}
	.advert_close{
		height: 50rpx;
		width: 50rpx;
		margin: 0 auto;
		border-radius: 100rpx;
	}
	.advert_close image{
		height: 30rpx;
		width: 30rpx;
	}
	
	.advert_video{
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2000000;
		background: rgba(0, 0, 0, 0.7);
	}
</style>